<template>
  <div class="supplier">
    <el-form ref="reffromDate" :inline="true" label-width="110px">
      <el-row>
        <el-col :span="12">
          <el-form-item>
            <span slot="label">份额维护ID：</span>
            <div>{{ id }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <span slot="label">公司：</span>
            <div>
              {{ fromDate.lotMaintain.company }}
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="typeId">
            <span slot="label">站点：</span>
            <div>
              {{ fromDate.lotMaintain.station }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="gradeId">
            <span slot="label">原物料名称：</span>
            <div>
              {{ fromDate.lotMaintain.rawName }}
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="padding-bottom: 10px">
        <el-button size="mini" class="bottom_all" style="margin-left: 0" @click="addItem()">
          <i class="icon iconfont iconicon_button_add" style="font-size: 12px"></i>
          添加
        </el-button>
      </div>
      <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="fromDate.list" tooltip-effect="dark">
        <el-table-column label="原物料合同编号" align="center" prop>
          <template slot-scope="scope">
            <el-select v-model="scope.row.contractId" placeholder="请选择" style="width: 100%" @change="changeitem(scope.row)">
              <el-option v-for="(item, index) in list" :key="index" :label="item.contractNo" :value="item.contractId">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="供应商" align="center" prop="supplier">
        </el-table-column>
        <el-table-column label="原物料" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.rawMaterialsId" placeholder="请选择" style="width: 100%" @change="changearritem(scope.row)">
              <el-option v-for="(item, index) in scope.row.arr" :key="index" :label="item.productName" :value="item.productId">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="品牌" align="center" prop="brand">
        </el-table-column>
        <el-table-column label="规格" align="center" prop="specification">
        </el-table-column>
        <el-table-column label="份额（%）" align="center">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.lotNum" style="width: 100%" :precision="2" :controls="false" :max="100">
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" width="100">
          <template slot-scope="scope">
            <el-button size="mini" class="bottom_two" @click="delItem(scope.$index)">
              <i class="icon iconfont iconicon_button_delete" style="font-size: 12px"></i>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import { getLotAllots, getContracts } from "@/api/GHnumber/share.js";
export default {
  data() {
    return {
      id: "0411dcebbac743759fb24cc736015e0e",
      fromDate: {
        lotMaintain: {
          company: "搬砖",
          companyId: "3de93202570c4126aae514dded41501a",
          rawId: "24cf310ef83146aab4e3f085cff4c89a",
          rawName: "原物料名称4",
          station: "站点名称",
          stationId: "1edeef3ebf5949cf9ef281dfece9fac3",
        },
        list: [],
      },
      list: [],
      fromDateList: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      await console.log("需要根据份额ID获取份额的基本系信息");
      await getLotAllots({
        id: this.id,
      }).then((res) => {
        this.fromDate.list = res.data.map((res) => {
          let obj = new Object();
          obj.id = res.id;
          obj.contractNo = res.contractNo;
          obj.contractId = res.contractId;
          obj.supplier = res.supplier;
          obj.supplierId = res.supplierId;
          obj.rawMaterialsId = res.rawMaterialsName;
          obj.brand = res.brand;
          obj.specification = res.specification;
          obj.lotNum = res.lotNum;
          obj.type = 2;
          obj.arr = res.list;
          return obj;
        });
        this.fromDateList = JSON.parse(JSON.stringify(this.fromDate.list));
      });
      let data = {
        id: "24cf310ef83146aab4e3f085cff4c89a",
        stations: "ab1ff05ccf2a46e6a6a3e0554f0311b2",
      };
      await getContracts(data).then((res) => {
        this.list = res.data;
      });
    },
    addItem() {
      let data = {
        contractNo: "",
        contractId: "",
        supplier: "",
        supplierId: "",
        rawMaterialsId: "",
        brand: "",
        specification: "",
        lotNum: "",
        type: 1,
        isCarriage: 0,
        arr: [],
      };
      this.fromDate.list.push(data);
    },
    delItem(index) {
      console.log(index);
      this.fromDate.list.splice(index, 1);
    },
    changeitem(e) {
      let item = this.list.find((res) => res.contractId == e.contractId);
      e.contractNo = item.contractNo;
      e.supplier = item.supplier;
      e.supplierId = item.supplierId;
      e.isCarriage = item.isCarriage;
      e.arr = item.list;
      e.rawMaterialsId = "";
      e.rawMaterialsName = "";
      e.brand = "";
      e.specification = "";
    },
    changearritem(e) {
      let item = e.arr.find((res) => res.productId == e.rawMaterialsId);
      console.log(item);
      e.rawMaterialsName = item.productName;
      e.brand = item.brand;
      e.specification = item.specification;
    },
  },
};
</script>

<style lang="scss" scoped>
.supplier {
  padding: 20px 100px;
}
</style>
